<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>市场商机</title>
	<link rel="stylesheet" href="../css/market.css">
</head>
<body>
	<div class="select-list" id="selectList">
		<div class="select-item active" data-value="sale">销量</div><div class="select-item" data-value="sales">销额</div>
    	<input type="hidden" value="sale">
	</div>
	<div>
		<div class="slide-container param-box">
			<div class="slide-content" id="slideContent"></div>
			<a href="javascript:void(0);" class="slide-btn slide-prev-btn"></a>
			<a href="javascript:void(0);" class="slide-btn slide-next-btn"></a>
			<ul class="slide-box">
				<li class="slide-row">
					<div class="slide-label">优势点：</div>
					<ul class="slide-option-list" id="advantageList"></ul>
				</li>
				<li class="slide-row">
					<div class="slide-label">改善点：</div>
					<ul class="slide-option-list" id="improveList"></ul>
				</li>
				<li class="slide-row">
					<div class="slide-label">机会点：</div>
					<ul class="slide-option-list" id="chanceList"></ul>
				</li>
			</ul>
		</div>
	</div>
	<div>
		<div class="radio-row">
            <label for="shareTypeQoq"><input type="radio" id="shareTypeQoq" name="shareType" checked>环比</label>
            <label for="shareTypeYoy"><input type="radio" id="shareTypeYoy" name="shareType">同比</label>
        </div>
		<table class="market-table" id="shareTable">
			<thead></thead>
			<tbody></tbody>
		</table>
	</div>
	<div>
		<table class="market-table" id="structureTable">
			<thead></thead>
			<tbody></tbody>
		</table>
	</div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/table2excel/dist/table2excel.js"></script>
<script type="text/javascript" src="../script/market.js"></script>
<script type="text/javascript">
	$(function () {
		var $select = $('#selectList');
   		$select.find('.select-item').on('click', function (el) {
	        var target = $(this);
	        $select.find('.select-item').removeClass('active');
	        target.addClass('active');
	        var value = target.data('value');
	        $select.find('input').val(value);
	        try {
	        	if (marketOpportunityObserve && typeof marketOpportunityObserve === 'function') {
		            marketOpportunityObserve();
		        }
		        if (eachPriceMarketShare && typeof eachPriceMarketShare === 'function') {
		            eachPriceMarketShare();
		        }
		        if (eachPriceMarketStructure && typeof eachPriceMarketStructure === 'function') {
		            eachPriceMarketStructure();
		        }
	        } catch (e) {
	        	console.log(e)
	        }
	    });
	    function renderSlide () {
	    	var paramBox = [
	    		{ name: '匹数', value: '匹数' },
	    		{ name: '冷媒', value: '冷媒' },
	    		{ name: '使用面积', value: '使用面积' },
	    		{ name: '颜色', value: '颜色' },
	    		{ name: '定频/变频', value: '定频/变频' },
	    		{ name: '能效等级', value: '能效等级' },
	    		{ name: '制热效率', value: '制热效率' },
	    		{ name: '制冷效率', value: '制冷效率' },
	    		{ name: '内机净重', value: '内机净重' },
	    		{ name: '内机噪音', value: '内机噪音' },
	    		{ name: '外机净重', value: '外机净重' },
	    	]

	    	var slideSwipe = new SlideSwipe('.param-box', {
	    		data: paramBox
	    	})
	    }
	    renderSlide();

	    function renderShareTable () {
	    	var type = 'qoq'
	    	var $table = $('#shareTable');
	    	var $thead = $table.find('thead');
	    	var $tbody = $table.find('tbody');
	    	$thead.empty();
	    	$tbody.empty();
	    	var qoqData = [
	    		{ seg: '<2000', type: '小1匹', value: 0.3, qoqValue: 0.1 },
	    		{ seg: '<2000', type: '1匹', value: 0.2, qoqValue: 0.15 },
	    		{ seg: '<2000', type: '大1匹', value: 0.0, qoqValue: -0.1 },
	    		{ seg: '<2000', type: '小1.5匹', value: 1.3, qoqValue: 0.1 },
	    		{ seg: '<2000', type: '1.5匹', value: 2.3, qoqValue: -0.1 },
	    		// { seg: '<2000', type: '大1.5匹', value: 1.34, qoqValue: 0.1 },
	    		{ seg: '2000~2500', type: '小1匹', value: 2.0, qoqValue: 2.1 },
	    		{ seg: '2000~2500', type: '1匹', value: 1.1, qoqValue: -0.15 },
	    		{ seg: '2000~2500', type: '大1匹', value: 5, qoqValue: 2.5 },
	    		{ seg: '2000~2500', type: '小1.5匹', value: -5.2, qoqValue: 6.1 },
	    		{ seg: '2000~2500', type: '1.5匹', value: 14, qoqValue: -0.1 },
	    		{ seg: '2000~2500', type: '大1.5匹', value: 1.34, qoqValue: 0.1 },
	    		{ seg: '2500~3000', type: '大1匹', value: 5, qoqValue: 0 },
	    		{ seg: '2500~3000', type: '小1.5匹', value: -5.2, qoqValue: 3.2 },
	    		{ seg: '2500~3000', type: '1.5匹', value: 5, qoqValue: -5.1 },
	    		{ seg: '2500~3000', type: '大1.5匹', value: 34, qoqValue: 0.0 },
	    	]
	    	var segArr = [];
	    	var typeArr = [];
	    	var theadStr = '';
	    	var tbodyStr = '';
	    	var colArr = ['份额'];
	    	var rateName = type === 'qoq' ? '环比' : '同比'
	    	colArr.push(rateName)
	    	var data = type === 'qoq' ? qoqData : []
	    	data.forEach(function (item) {
	    		segArr.indexOf(item.seg) < 0 && segArr.push(item.seg);
	    		typeArr.indexOf(item.type) < 0 && typeArr.push(item.type);
	    	});
	    	theadStr = '<tr><th rowspan="2">价格段</th>';
	    	// 第一行
	    	typeArr.forEach(function (item) {
	    		theadStr += '<th colspan="2">'+ item +'</th>';
	    	});
	    	theadStr += '</tr></tr>';
	    	// 第二行
	    	typeArr.forEach(function (item) {
	    		colArr.forEach(function (col) {
	    			theadStr += '<th data-type="'+ item + '&' + col +'">'+ col +'</th>';
	    		});
	    	});
	    	theadStr += '</tr>'
	    	console.log(segArr, typeArr);
	    	var list = [];
	    	var row = { seg: '' };
	    	typeArr.forEach(function(item) {
	    		colArr.forEach(function (col) {
	    			row['' + item + '&' + col] = '0.00'
	    		});
	    	});
	    	segArr.forEach(function(seg) {
	    		var item = $.extend(true, {}, row, { seg: seg });
	    		list.push(item);
	    	});
	    	list.forEach(function(item) {
	    		data.forEach(function(jItem) {
	    			if (item.seg === jItem.seg) {
	    				item[jItem.type + '&' + '份额'] = jItem.value;
	    				item[jItem.type + '&' + rateName] = jItem.qoqValue;
	    			}
	    		});
	    	});

	    	// tbody
	    	list.forEach(function (item) {
	    		tbodyStr += '<tr>';
	    		tbodyStr += '<td>'+ item.seg +'</td>';
	    		typeArr.forEach(function (jItem) {
	    			var color = ''
	    			var value = parseFloat(item[jItem + '&' + rateName]);
	    			color = value > 0 ? 'red' : value < 0 ? 'green' : '';
	    			colArr.forEach(function (col) {
	    				tbodyStr += '<td data-seg="'+ item.seg +'" data-type="'+ jItem + '" data-col="'+ col +'"><span class="'+ color +'">' + item[jItem + '&' + col] + '%' + '</span></td>';
	    			});
	    		});
	    		tbodyStr += '</tr>';
	    	});
	   		$tbody.append(tbodyStr)

	    	console.log(list)
	    	$thead.append(theadStr);
	    }
	    renderShareTable();
	});
</script>
</html>